<template>
	<view class="login">
		<view class="bg">
			<image src="../../static/login.jpg"></image>
		</view>
		<view class="nav" @click="go">
			<uni-icons type="arrowleft" color="aqua"></uni-icons>
			<view style="margin-left: 5rpx;" >账号登陆</view>
		</view>
		
		<view class="content">
			<view class="message">
				<view class="detail">
					<text>管理员姓名</text>
					<input type="text" placeholder="管理员姓名" v-model="adminName">
				</view>
				<view class="detail">
					<text>邮箱地址</text>
					<input type="text" placeholder="邮箱地址" v-model="adminEmail">
				</view>
				<view class="detail">
					<text>注册密钥</text>
					<input type="safe-password" password="true" placeholder="注册密钥" v-model="key">
				</view>
				<view class="detail">
					<text>密码</text>
					<input type="safe-password" password="true" placeholder="密码" v-model="adminPass">
				</view>
				<view class="detail">
					<text>密码确认</text>
					<input type="safe-password" password="true" placeholder="密码确认" v-model="adminPass2">
				</view>
				<view class="detail">
					<text>验证码</text>
					<input type="text"  placeholder="验证码" v-model="code" style="width: 300rpx;">
					<button class="btn" @click="tosure" v-if="showText==true">获取</button>
					<button class="btn btn2" v-else>{{second}}s</button>
				</view>
				
			</view>
			<view class="message3">
				<button class="button" @click="register">注册</button>
			</view>
		</view>
	</view>
	
</template>

<script>
import http from '../../utils/http'
	export default {
		data() {
			return {
				second:60,
				showText:true,
				adminName:'',
				adminEmail:'',
				key:'',
				adminPass:'',
				adminPass2:'',
				code:''
			}
		},
		methods: {
			go(){
				uni.navigateTo({
					url: '../backend/login'
				});
			},    
			tosure(){
				http({
					method:'post',
					url:`/admin/sendMessage`,
					data:{
						adminEmail:this.adminEmail
					},
					success: (res) => {
						console.log(res.data.data)
						if(res.data.code==1){
							uni.showToast({titile:res.data.data,icon:'success'});
						}else{
							uni.showToast({titile:res.data.data,icon:'error'})
						}
					},
					fail:(error)=>{
						// console.log(error)
						uni.showToast({titile:'出错了',icon:'error'})
					}
				})
				this.showText = false
				var interval = setInterval(() => {
				    let times = --this.second
				    this.second = times<10?'0'+times:times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
				    clearInterval(interval)
				    this.second=60
				    this.showText = true
				}, 60000)
			},
			register(){
				if(this.adminPass==this.adminPass2 && this.code != ''){
					http({
						method:'post',
						url:`/admin/register`,
						data:{
							adminName:this.adminName,
							adminEmail:this.adminEmail,
							adminPWD:this.adminPass,
							secretKey:this.key,
							code:this.code
						},
						success: (res) => {
							console.log(res.data.code)
							if(res.data.code==1){
								uni.showToast({titile:'注册成功，请登录',icon:'success'})
								uni.navigateTo({
									url: '../backend/login'
								});
							}else{
								console.log('你失败了')
								uni.showToast({titile:'注册失败',icon:'error'})
							}
						},
						fail:(error)=>{
							// console.log(error)
							uni.showToast({titile:'出错了',icon:'error'})
						}
					})
				}else{
					console.log('密码或验证码错误')
					uni.showToast({titile:'密码或验证码错误，请验证',icon:'error'})
				}
			}
		}
	}
</script>

<style>
.login {
	position: relative;
	display: flex;
}
.bg image {
	position: absolute;
	height: 1280rpx;
	width: 750rpx;
}
.nav{
	display: flex;
	color: aqua;
	position: absolute;
	margin-top: 30rpx;
	font-family: YouYuan;
}
.content {
	margin-left: 80rpx;
	margin-top: 180rpx;
	position: absolute;
	text-align: center;
}
.message{
	margin-top: 20%;
	color: aqua;
}
.btn {
	background-color: #fff;
	color: aqua;
	font-size: 30rpx;
	width: 120rpx;
	height: 80rpx;
}
.btn2 {
	color:#a3a3a3;
}
.message3{
	margin-top: 10%;
}
.detail {
	display: flex;
	justify-content: space-between;
}
.detail input{
	color: aqua;
	text-align: center;
	font-size: 32rpx;
	width: 400rpx;
}
.tip{
	color: aqua;
	text-decoration: underline;
	margin-top: 20%;
	font-size: 30rpx;
}
.detail{
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1px solid rgba(238, 238, 238, 1);
	margin-left: 30rpx;
	padding-right: 30rpx;
}
.button{
	margin-top: 15rpx;
	text-align: center;
	line-height: 86rpx;
	width: 600rpx;
	height: 86rpx;
	border-radius: 30px;
	background-color: #41c20c;
	color: white;
	font-size: 14px;
}
</style>
